// 主要的页面初始化和交互逻辑

// 初始化粒子背景
function initParticles() {
  particlesJS("particles-js", {
    particles: {
      number: { value: 80, density: { enable: true, value_area: 800 } },
      color: { value: "#3B82F6" },
      shape: { type: "circle" },
      opacity: { value: 0.5, random: true },
      size: { value: 3, random: true },
      line_linked: {
        enable: true,
        distance: 150,
        color: "#3B82F6",
        opacity: 0.2,
        width: 1
      },
      move: {
        enable: true,
        speed: 1,
        direction: "none",
        random: true,
        straight: false,
        out_mode: "out",
        bounce: false
      }
    },
    interactivity: {
      detect_on: "canvas",
      events: {
        onhover: { enable: true, mode: "grab" },
        onclick: { enable: true, mode: "push" },
        resize: true
      },
      modes: {
        grab: { distance: 140, line_linked: { opacity: 0.5 } },
        push: { particles_nb: 4 }
      }
    },
    retina_detect: true
  });
}

// 初始化fullPage
function initFullPage() {
  new fullpage('#fullpage', {
    autoScrolling: true,
    // navigation: true,  // 启用导航栏
    anchors: ['welcome', 'what-is-frontend', 'tech-stack', 'showcase1', 'showcase2', 'projects', 'thanks'],
    navigationTooltips: ['欢迎', '前端介绍', '技术栈', '展示1', '展示2', '项目展示', '感谢'],
    showActiveTooltip: true,
    scrollHorizontally: false,
    scrollBar: false,
    fitToSection: true,
    verticalCentered: true,
    paddingTop: 0,
    paddingBottom: 0,
    normalScrollElements: '.tech-icon-item, [id$="Chart"]',
    // 页面切换动画
    onLeave: function(origin, destination, direction) {
      const leavingSection = origin.item;
      leavingSection.classList.add('opacity-0', 'transition-opacity', 'duration-500');
      
      // 重置进入动画
      setTimeout(() => {
        const enteringSection = destination.item;
        enteringSection.classList.remove('opacity-0');
      }, 300);
    },
    afterLoad: function(origin, destination, direction) {
      // 为进入的section添加动画类
      const section = destination.item;
      section.classList.add('animate-fade-in');
      
      // 修复容器宽度和强制居中
      setTimeout(() => {
        const fpOverflow = document.querySelector('.fp-overflow');
        if (fpOverflow) {
          fpOverflow.style.width = '100vw';
          fpOverflow.style.maxWidth = 'none';
          fpOverflow.style.overflowX = 'visible';
        }
        
        const currentSection = destination.item;
        const sectionContent = currentSection.querySelector('.section');
        if (sectionContent) {
          // 重置所有可能影响布局的样式
          currentSection.style.display = 'flex';
          currentSection.style.flexDirection = 'column';
          currentSection.style.justifyContent = 'center';
          currentSection.style.alignItems = 'center';
          currentSection.style.minHeight = '100vh';
          currentSection.style.position = 'relative';
          
          sectionContent.style.display = 'flex';
          sectionContent.style.flexDirection = 'column';
          sectionContent.style.justifyContent = 'center';
          sectionContent.style.alignItems = 'center';
          sectionContent.style.width = '100%';
          sectionContent.style.height = '100%';
          sectionContent.style.minHeight = '100vh';
        }
        
        // 查找 .fp-tableCell 并强制设置
        const tableCell = currentSection.querySelector('.fp-tableCell');
        if (tableCell) {
          tableCell.style.display = 'flex';
          tableCell.style.flexDirection = 'column';
          tableCell.style.justifyContent = 'center';
          tableCell.style.alignItems = 'center';
          tableCell.style.height = '100vh';
          tableCell.style.verticalAlign = 'middle';
        }
      }, 100);
    }
  });
}

// 强制修复所有页面居中
function forceFixCentering() {
  setTimeout(() => {
    const allSections = document.querySelectorAll('.fp-section');
    allSections.forEach(section => {
      section.style.display = 'flex';
      section.style.flexDirection = 'column';
      section.style.justifyContent = 'center';
      section.style.alignItems = 'center';
      section.style.minHeight = '100vh';
      
      const sectionContent = section.querySelector('.section');
      if (sectionContent) {
        sectionContent.style.display = 'flex';
        sectionContent.style.flexDirection = 'column';
        sectionContent.style.justifyContent = 'center';
        sectionContent.style.alignItems = 'center';
        sectionContent.style.width = '100%';
        sectionContent.style.height = '100%';
        sectionContent.style.minHeight = '100vh';
      }
      
      const tableCell = section.querySelector('.fp-tableCell');
      if (tableCell) {
        tableCell.style.display = 'flex';
        tableCell.style.flexDirection = 'column';
        tableCell.style.justifyContent = 'center';
        tableCell.style.alignItems = 'center';
        tableCell.style.height = '100vh';
      }
    });
  }, 500);
}

// 初始化页面交互
function initInteractions() {
  // 演示按钮交互
  const demoBtn = document.getElementById('demo-btn');
  if (demoBtn) {
    demoBtn.addEventListener('click', function() {
      alert('这就是前端交互！是不是很酷？');
    });
  }
  
  // 页面载入动画
  const sections = document.querySelectorAll('.section');
  sections.forEach((section, index) => {
    if (index !== 0) {
      section.classList.add('opacity-0');
    }
  });
}

// 隐藏fullPage.js版权信息
function hideWatermark() {
  setTimeout(() => {
    const watermarks = document.querySelectorAll('.fp-watermark');
    watermarks.forEach(watermark => {
      watermark.style.display = 'none';
      watermark.style.visibility = 'hidden';
      watermark.style.opacity = '0';
      watermark.remove(); // 直接删除元素
    });
  }, 100);
  
  // 定期检查并删除
  const checkInterval = setInterval(() => {
    const watermarks = document.querySelectorAll('.fp-watermark');
    if (watermarks.length > 0) {
      watermarks.forEach(watermark => watermark.remove());
    }
  }, 1000);
  
  // 10秒后停止检查
  setTimeout(() => clearInterval(checkInterval), 10000);
}

// 页面初始化
document.addEventListener('DOMContentLoaded', function() {
  // 初始化各个模块
  initParticles();
  initFullPage();
  initInteractions();
  
  // 隐藏版权水印
  hideWatermark();
  
  // 强制修复居中问题
  forceFixCentering();
  
  // 延迟初始化图表和动画
  setTimeout(() => {
    // 初始化动画组件
    if (typeof initAnimations === 'function') {
      initAnimations();
    }
    
    // 初始化图表
    if (typeof initCharts === 'function') {
      initCharts();
    }
    
    // 再次修复居中
    forceFixCentering();
    
    // 再次隐藏水印
    hideWatermark();
  }, 1000);
});

// 页面完全加载后的额外初始化
window.addEventListener('load', () => {
  // 再次隐藏水印
  hideWatermark();
  
  setTimeout(() => {
    // 重新尝试初始化图表
    if (typeof echarts !== 'undefined' && typeof initCharts === 'function') {
      initCharts();
    }
    
    // 最后一次隐藏水印
    hideWatermark();
  }, 2000);
});
